<template>
  <div class="cup-detail slide-right" ref="moveDivCupDetail"
       :style="{width:width+'px',top:top}"
       @touchstart="down"
       @touchmove.prevent="move"
       @touchend="end"
  >
    <div class="cup-detail-head" :style="{height:height*0.1+'px',lineHeight:height*0.05+'px'}">
      <div class="div-line"></div>
      <div class="titlec" :style="{height:0.037*height+'px'}">
        <span :style="{backgroundColor:cup.settings.waterColour}">{{ cup.cupName }}</span>
      </div>
      <div class="dot" :class="closeEm?'close':''" @click="close"></div>
    </div>
    <div class="cup-detail-content">
      <div class="cup-detail-info-head">
        <img :src="cup.img" alt=""
             class="cup-detail-img">
        <div class="cup-detail-cupname">
          {{ cup.cupName }}
        </div>
      </div>
      <div class="cup-detail-intro">{{ cup.intro }}</div>
      <div class="cup-detail-settings">
        <van-slider v-model="cup.capacity" :min="0" :max="3000" vertical/>
        <van-slider style="margin-left: 100px;" v-model="cup.settings.touchWaterMaxML"  vertical/>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: "CupDetail",
  props: {
    index: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      closeEm: false,
      capacityN: null,

      /*  drag  */
      flags: false,
      position: {x: 0, y: 0},
      nx: '', ny: '', dx: '', dy: '', xPum: '', yPum: '',
      moveDivCupDetail: null,
      // wMax: null,
      hMax: null,
    }
  },
  computed: {
    ...mapState(['user', 'activeCup']),
    width() {
      let w = document.documentElement.clientWidth;
      if (w < 375) return Math.floor(w * 0.8);
      else return 300;
    },
    height() {
      let h = document.documentElement.clientHeight;
      if (h < 812) return Math.floor(h * 0.61);
      return 490;
    },
    top() {
      let h = document.documentElement.clientHeight * 0.15 + document.documentElement.scrollTop;
      h = h + this.index * 60;
      return h + 'px';
    },
    cup() {
      return this.user.cups[this.index];
    }
  },
  methods: {
    close() {
      this.closeEm = true;
      // console.log('close cup_detail')
      this.$emit('close')
    },
    down(event) {
      this.flags = true;
      // this.position.x = event.touches[0].clientX;
      this.position.y = event.touches[0].clientY;
      // this.dx = this.moveDivCupDetail.offsetLeft;
      this.dy = this.moveDivCupDetail.offsetTop;
    },
    move(event) {
      if (this.flags) {
        // this.nx = event.touches[0].clientX - this.position.x;
        this.ny = event.touches[0].clientY - this.position.y;
        // this.xPum = this.dx + this.nx;
        this.yPum = this.dy + this.ny;

        // if (this.xPum < 0) this.xPum = 0;
        // else if (this.xPum > this.wMax) this.xPum = this.wMax;
        if (this.yPum < 0) this.yPum = 0;
        else if (this.yPum > this.hMax) this.yPum = this.hMax;
        // this.moveDivCupDetail.style.left = this.xPum + "px";
        this.moveDivCupDetail.style.top = this.yPum + "px";
        //阻止页面的滑动默认事件；如果碰到滑动问题，1.2 请注意是否获取到 touchmove
        document.addEventListener("touchmove", function () {
          event.preventDefault();
        }, false);
      }
    },
    end() {
      this.flags = false;
    },
  },
  mounted() {
    this.moveDivCupDetail = this.$refs.moveDivCupDetail;
    // this.wMax = document.documentElement.clientWidth - this.moveDivCupDetail.offsetWidth;
    this.hMax = this.$root.$el.offsetHeight - 120 - this.moveDivCupDetail.offsetHeight;
  }
}
</script>

<style lang="less">
.cup-detail {
  font-family: ZCOOL, serif;
  box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.1);
  position: absolute;
  left: 0;
  background-color: #fff;
  border-radius: 20px;
  height: 490px;

  .cup-detail-head {

    .div-line {
      position: absolute;
      top: 0;
      left: 15%;
      width: 70%;
      height: 2px;
      border-top: black solid;
    }

    .titlec {
      left: 15%;
      width: 70%;
      overflow: hidden;
      position: absolute;
      top: 3%;
      font-weight: 400;
      font-size: 13px;
      text-align: center;
    }

    .dot {
      position: absolute;
      z-index: 10;
      top: 3%;
      right: 6%;
      border-radius: 50%;
      width: 15px;
      height: 15px;
      background-color: #8A0917;
      box-shadow: 0 4px 0 #5a060f;
      color: #fff;
    }


  }

  .cup-detail-content {
    position: absolute;
    left: 5%;
    width: 90%;
    height: 86%;
    border: black 1px solid;
    border-radius: 10px;

    .cup-detail-info-head {
      position: absolute;
      width: 100%;
      height: 100px;
      vertical-align: middle;
      text-align: center;
      padding: 10px;
      margin: auto;

      .cup-detail-img {
        width: 80px;
        height: 80px;
        border-radius: 20px;
      }

      .cup-detail-cupname {
        margin: auto;
        text-align: center;
        width: 80%;
        left: 10%;
        height: 40px;
        line-height: 20px;
        vertical-align: middle;
        overflow: hidden;
        font-size: 15px;
      }

    }

    .cup-detail-intro {
      position: absolute;
      width: 90%;
      left: 5%;
      text-align: center;
      top: 140px;
      height: 150px;
      overflow: hidden;
      font-size: 16px;
    }

    .cup-detail-settings {
      position: absolute;
      text-align: center;
      top: 290px;
      width: 90%;
      left: 5%;
      height: 100px;
    }

  }
}

/* ANIMATIONS ================ */

@keyframes inputHighlighter {
  from {
    background: #5264ae;
  }
  to {
    width: 0;
    background: transparent;
  }
}

.slide-right {
  -webkit-animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes slide-right {
  0% {
    -webkit-transform: translateX(-300px);
    transform: translateX(-300px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}


</style>